<template>

  <router-link to='/home'> 首页</router-link>
  <router-link to='/login'> 登录</router-link>

  <van-form @submit="onSubmit"
            class="form">
    <van-cell-group inset>
      <van-field v-model="username"
                 name="用户名"
                 label="用户名"
                 placeholder="用户名"
                 :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password"
                 type="password"
                 name="密码"
                 label="密码"
                 placeholder="密码"
                 :rules="[{ required: true, message: '请填写密码' }]" />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round
                  block
                  type="primary"
                  native-type="submit">
        提交
      </van-button>
    </div>
    <div class="registerBox">
      <router-link to='/register'>
        <span>立即注册</span>
      </router-link>
      <span>忘记密码</span>
    </div>
  </van-form>

</template>

<script>

import { post } from '../../utils/request'
import { ref } from 'vue'
import { Toast } from 'vant'

import { useRouter } from 'vue-router'
export default {
  name: 'appLogin',
  setup () {
    const router = useRouter()
    const username = ref('')
    const password = ref('')
    const onSubmit = async (values) => {
      // console.log('submit', values)

      const res = await post('/api/user/login', { username, password })
      console.log(res)
      // res?.errno !== 0 ? alert('登录失败') : alert('成功')
      if (res?.errno !== 0) return alert('失败')
      // 成功
      alert('成功')
      Toast.success('成功文案')
      localStorage.isLogin = true
      // localStorage.setItem('isLogin',true)
      router.push({ name: 'home' })
    }
    return {
      username,
      password,
      onSubmit
    }
  }
}
</script>

<style scoped lang='less'>
.form {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}
</style>
